<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import '../assets/styles/common/lib-mixins.less';
@import '../assets/styles/common/common.less';

.order-status{
  margin-top: 200px;
  .flex-column-start;

  .bw-ico{
    width: 100px;
    height: 100px;
  }

  .suc-icon{
    background-image:url(../assets/images/icons/suc-icon.png);
  }

  .order-money{
    margin-top: 30px;
    color: #ff9900;
    .px2px(font-size, 36PX);
  }
}

.info-list{
  padding: 0 30px;
  margin-top: 70px;

  li{
    height: 80px;
    padding: 0 20px;
    box-sizing: border-box;
    border-top: 1PX solid #ddd;
    .flex-row-between;

    label{
      .px2px(font-size, 26PX);
      color: #ccc;
    }

    .info-value{
      .px2px(font-size, 30PX);
      color: #000;
    }
  }
}
</style>
<template>
  <div class="container">
      <div class="order-status">
          <i class="bw-ico suc-icon"></i>
          <p class="order-money">￥{{detailInfo.amount.amount}}</p>
      </div>
      <ul class="info-list">
        <li>
            <label>订单号</label>
            <p class="info-value">{{payNo}}</p>
        </li>
        <li>
            <label>当前状态</label>
            <p class="info-value">{{detailInfo.orderState | checkPayStatus}}</p>
        </li>
        <li>
            <label>开始充电时间</label>
            <p class="info-value">{{detailInfo.createTime}}</p>
        </li>
        <li>
            <label>充电地点</label>
            <p class="info-value">{{detailInfo.merchantName}}</p>
        </li>
        <li>
            <label>端口号</label>
            <p class="info-value">{{detailInfo.portIndex}}</p>
        </li>
        <li>
            <label>支付方式</label>
            <p class="info-value">{{detailInfo.payType | checkType}}</p>
        </li>
      </ul>
  </div>
</template>
<script>
import BW from '../assets/scripts/common/bwCommon'
export default {
  components: {
  },
  data() {
    return {
      detailInfo: {amount: 0},   // 初始化数据
      payNo: ''
    }
  },
  async mounted() {
    let res = await this.request('orderDetail', {no: this.$route.query.no}, 'get')
    this.$store.commit('updateLoadingStatus', false)
    res.data.createTime = BW.dateFtt(new Date(res.data.createTime), 'yyyy-MM-dd')
    this.detailInfo = res.data
    this.payNo = this.$route.query.no
  },
  methods: {
  }
}
</script>
